<template>
  <div class="airticket">
    <div>
      <h3 class="font">航班查询</h3>
    </div>
    <div class="air_background">
      <!-- 选择城市,选择时间 -->
      <div>
        <sel :msg="msg"></sel>
      </div>
    </div>
    <!-- 查询信息展示 -->
    <div class="text_selection" v-show="selection_state_1">
      <el-table :data="tictet.tictet_data_air" style="width: 100%">
        <el-table-column prop="startTime" label="出发时间" width="150" />
        <el-table-column prop="reachTime" label="到达时间" width="150" />
        <el-table-column prop="totalTime" label="总时长" width="150" />
        <el-table-column prop="startPlace" label="始发站" width="150" />
        <el-table-column prop="endPlace" label="终点站" width="150" />
        <el-table-column prop="type" label="航班类型" width="250" />
        <el-table-column prop="price" label="票价/元" width="150" />
        <el-table-column prop="ticketNum" label="余票/张" width="150" />
        <el-table-column align="right">
          <template #default="scope">
            <el-button size="small" @click="buy_ticket(scope.$index, scope.row)">购票</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 占位盒 -->
    <div class="air" v-show="!selection_state_1">
      <div>暂无信息...</div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from "vue"
import sel from "../../components/Selection_city.vue"
import { ElMessage } from 'element-plus'
//引入pinia
import { useUserStore } from "../../store/UserStore.js";
const UserStore = useUserStore();
import { tictetdata } from "../../store/Ticketdata";
import { storeToRefs } from "pinia";
const tictet = tictetdata();
let { selection_state_1 } = storeToRefs(tictet)
//路由跳转
import { useRouter } from "vue-router";
let router = useRouter();
//传递参数，让子组件显示座位分类
let msg = ref(1)
//购票功能
interface order {
  startPlace: string
  endPlace: string
  startTime: string
  reachTime: string
  totalTime: string
  type: string
}
let buy_ticket = (index: number, row: order) => {
  console.log(index, row)
  tictet.order_data = row
  //订单页面跳转
  if (sessionStorage.length != 0 && UserStore.useremail != null) {
    setTimeout(function () {
      router.push({
        path: '/order',
        query: {
          ticket_type: '1'
        }
      })
    }, 500)
  } else {
    ElMessage({
      showClose: true,
      message: '您还未登录，正在跳转登录页面...',
      type: 'error',
    })
    const message = document.querySelector('.el-message__content')?.parentNode
    //判断提示框的数量   
    if (document.getElementsByClassName('el-message__content').length > 1) {
        setTimeout(function () {
            message.parentNode.removeChild(message);
        }, 100)
    }
    setTimeout(function () {
      router.push("/login")
    }, 500)
  }
}

</script>

<style lang='scss'>
.airticket {
  width: 1200px;
  .font{
    font-weight: 400;
    font-size: 20px;
  }
}

.air {
  height: 500px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
}

.slider-wrap {
  max-width: 1180px;
  overflow: hidden;
  height: 156px;
  margin: 32px auto;
  border-radius: 6px;
}

.air_background {
  background-image: url("http://101.42.51.171:9000/smart/image/air1.jpg");
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  z-index: -1;
}

.text_selection {
  margin-top: 40px
}
</style>